<template>
  <div>
    <el-dialog
      title="配置司机"
      width="35%"
      :visible="visible"
      @close="closeDialog"
    >

      <!-- ====== -->
      <div class="background">
        <div class="fix">
          <div class="driver"><span style="color: #000000; margin-right: 10px;">车牌号:</span><span style="color:#818693;">{{ driverInfo.licensePlate }}</span></div>
          <div class="driver"><span style="color: #000000; margin-right: 10px;">车型:</span><span style="color:#818693;">{{ driverInfo.truckTypeName }}</span></div>
          <div class="driver"><span style="color: #000000; margin-right: 10px;">车辆状态:</span><span style="color:#818693;">
            <el-tag v-if="driverInfo.workStatus == 1" effect="light" type="success">可用</el-tag>
            <el-tag v-else effect="light" type="danger">不可用</el-tag>
          </span></div>
          <div class="driver"><span style="color: #000000; margin-right: 10px;">实载重量:</span><span style="color:#818693;">{{ driverInfo.allowableLoad }}</span></div>
          <div class="driver"><span style="color: #000000; margin-right: 10px;">实载体积:</span><span style="color:#818693;">{{ driverInfo.allowableVolume }}</span></div>
        </div>
        <!-- 配置司机 -->
        <div>
          <span style="font-weight: 700; font-size: 16px; margin-right: 10px;">配置司机:</span>
          <el-select v-model="UnbundledDriver.id" multiple placeholder="请选择" @change="change">
            <el-option
              v-for="item in UnbundledDriver"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div>
          <el-table
            stripe
            style="width: 100% ;margin-top: 20px;"
            :data="newArrayWithNames"
          >
            <el-table-column
              type="index"
              label="序号"
              width="180"
            />
            <el-table-column
              prop="name"
              label="司机名称"
              width="180"
            />

            <el-table-column
              prop="address"
              label="操作"
            >
              <template v-slot="{row}">
                <span style="color: #0093ff;" @click="$router.push(`/transit2/driver/detail/${row.id}`)">查看</span>
                <span class="line">|</span>
                <span style="color: #ff5454;" @click="del(row.id)">删除</span>
              </template>
            </el-table-column>

          </el-table>
        </div>

      </div>
      <!-- ====== -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="boundDriver">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { bindDriver, getDriverList, getTruckDetail } from '@/api/vehicleBack'
export default {
  name: 'Driver',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    }

  },
  data() {
    return {
      driverInfo: [], // 配置司机信息
      UnbundledDriver: [], // 未绑定的司机
      bindingList: [], // !要上传绑定的司机id列表
      carId: [], //! 车辆id
      newArrayWithNames: [] // 司机列表
    }
  },
  watch: {
    id() {
      this.getTruckDetail()
    }
  },
  created() {
    this.getUnbundledDriver()
  },
  methods: {
    // 关闭模态框
    closeDialog() {
      this.$emit('update:visible', false)
    },
    // 获取车辆详情
    async getTruckDetail() {
    //   console.log(this.id)
      this.carId = this.id
      //   console.log(this.driverTable)
      const res = await getTruckDetail(this.id)
      this.driverInfo = res.data
      console.log(this.driverInfo)
    },
    // TODO 获取未绑定的司机
    async getUnbundledDriver() {
      const res = await getDriverList()
      console.log(res)
      this.UnbundledDriver = res.data
      this.driverTable = res.data.name
    },
    // todo 获取选到的值
    async change(e) {
      console.log(e)
      this.bindingList = e
      console.log(this.bindingList[0])
      //  ! 获取司机信息
      const res = await getDriverList()
      console.log(res)
      this.newArrayWithNames = this.bindingList.map(item => {
        // 在 res 中查找与 item 匹配的元素
        const matchingDriver = res.data.find(driver => driver.id === item)
        if (matchingDriver) {
          // 如果找到匹配的元素，返回一个包含 name 属性的新对象
          return { ...matchingDriver, name: matchingDriver.name }
        }
        return null // 如果没有匹配的元素，返回 null 或者其他你想要的值
      })

      // newArrayWithNames 数组包含了匹配的元素，并为每个元素添加了 name 属性
      console.log(this.newArrayWithNames)
    },
    async boundDriver() {
      const truckId = this.id
      const driverIds = this.bindingList
      const res = await bindDriver(driverIds, truckId)
      console.log(res)
    },
    del(id) {
      //  ? 在点击删除按钮时，从bindingList中移除特定的ID
      const index = this.bindingList.indexOf(id)
      if (index !== -1) {
        this.bindingList.splice(index, 1)
      }
      // ? 同时关闭newArrayWithNames中对应项
      const itemIndex = this.newArrayWithNames.findIndex(item => item.id === id)
      if (itemIndex !== -1) {
        this.newArrayWithNames.splice(itemIndex, 1)
      }
    }
  }
}
</script>

<style scoped>

.background{
    padding: 10px;
  }
  .fix{
  margin-bottom: 20px;
    display:flex;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 18px;
    flex-wrap: wrap;
  }
  .driver{
  padding-bottom: 10px;
  width: 200px;
  font-size: 14px;
}
.dot{
  display: inline-block;
  width: 6px;
    height: 6px;
    background: #1dc779;
    border-radius: 50%;
    align-items: center;
    margin:2.5px;
    margin-right: 8px;
}
.dot1{
  display: inline-block;
  width: 6px;
    height: 6px;
    background: red;
    border-radius: 50%;
    align-content: center;
    margin:2.5px;
    margin-right: 8px;
}
.line{
  display: inline-block;
  font-size: 18px;
  color: #cecece;
  padding: 5px;
}
.el-dialog__footer{
  display: flex;
    justify-content: space-around;
}
</style>
